<template>
  <div class="head">
    <div class="title">
      <img
        src="../../assets/bnr.png"
        style="padding-right:1rem;height: 20px;"
      />{{ title }}
    </div>
    <div class="time">
      <span>{{ time }}</span>
    </div>
    <div class="head-right"></div>
  </div>
</template>
<script>
export default {
  name: 'ToHead',
  components: {},
  props: {
    title: {
      type: String,
      default: '',
    },
    time: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
}
</script>
<style lang="less" scoped>
.head {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  height: 8vh;
  background: url(../../assets/header_bj2.png) no-repeat;
  background-size: 100% 100%;
}
.left {
  flex: 20%;
  font-size: 1.7rem;
}
.title {
  flex: 60%;
  .px2font(24);
  color: #fff;
  padding-top: 12px;
  letter-spacing: 2px;
}

.time {
  position: absolute;
  left: 0;
  width: 30vw;
  .px2vh(top, 40);
  .px2font(18);
  color: #ddd;
}
.head-right {
  position: absolute;
  right: 0;
  width: 30vw;
  top: 3.5rem;
  font-size: 2.4rem;
  color: #fff;
}
.logoy {
  /* width: 2.4rem;
  height: 1rem;
  opacity: 0.8; */

  position: absolute;
  right: 2vw;
  opacity: 0.7;
  top: 89.5vh;
  z-index: 99999;
}
.logoy img {
  height: 2rem;
  z-index: 99999;
}
</style>
